import React, { useState, useReducer } from 'react'
import './App.css'
import Home from './pages/Home'
import Sublist from './pages/Sublist'
import My from './pages/My'
import Details from './pages/Details'
import Login from './pages/Login'
import { Switch, Route, Redirect, useHistory, useLocation } from 'react-router-dom'

import { Tabbar } from 'react-vant';
import { FriendsO, HomeO, Search, SettingO } from '@react-vant/icons'

import { reducer, initState } from './store/reducer'
import Ctx from './store/Ctx'

export default function App() {

  //标签栏数据
  let [navapp, setnavapp] = useState([
    { path: '/home', icon: <HomeO />, title: '首页' },
    { path: '/sublist', icon: <Search />, title: '订阅' },
    { path: '/my', icon: <FriendsO />, title: '我的' },
  ])

  //通过hook方法实现页面跳转和刷新页面高亮不消失
  let history = useHistory()
  let location = useLocation()

  //多状态管理
  let [state, dispatch] = useReducer(reducer, initState)

  return (
    <div>
      <Ctx.Provider value={{
        ...state,
        dispatch
      }}>
        {/* 配置路由 */}
        <Switch>
          <Route path='/home' component={Home} />
          <Route path='/sublist' component={Sublist} />
          <Route path='/my' component={My} />
          <Route path='/details' component={Details} />
          <Route path='/login' component={Login} />
          <Redirect from='/' to='/home' />
        </Switch>
      </Ctx.Provider>

      {/* 渲染数据 标签栏  点击并跳转到对应的页面*/}
      <div className='demo-tabbar'>
        <Tabbar value={location.pathname} onChange={(index) => {
          history.push(index)
        }}>
          {
            navapp.map(item => {
              return <Tabbar.Item key={item.path} icon={item.icon} name={item.path}>
                {item.title}
              </Tabbar.Item>
            })
          }
        </Tabbar>
      </div>

    </div>
  )
}
